<template>
  <page-wrap
    stay-still
    back
    hide-tab
    :title="dynamicTitle"
    contentWrapColor="#fff"
  >
    <view class="form-wrap" :style="'margin-bottom:' + inputBottom + 'px;'">
      <view class="form-top" v-if="showTitle">
        <template>
          <view class="form-top-title">填写{{ label || '内容' }}</view>
          <view class="form-top-subtitle">{{ subTitleMapper[propType] }}</view>
        </template>
      </view>
      <view class="form-content">
        <u-input
          :class="{ 'form-text': true, isFocus: isFocus }"
          type="textarea"
          v-model="inputValue"
          :height="inputHeight"
          :maxlength="1600"
          :placeholder="
            newResumeCurrentFormItemInfo.inputPlaceholder ||
            placeholderMapper[propType]
          "
          :auto-height="false"
          show-word-limit
          @keyboardheightchange="handleBottom"
          :cursor-spacing="80"
          :id="propType"
          :clearable="false"
          @focus="handleFocus"
          @blur="handleBlur"
          :show-confirmbar="false"
        ></u-input>
        <view class="form-content-example" @click="showExample = true">
          <img :src="iconPath" class="form-content-example-icon" alt="" />
          看看别人怎么写
        </view>
        <view class="textarea-limit"
          ><span :style="{ color: '#F75A3E' }">{{
            inputValue.length || 0
          }}</span>
          / {{ 1600 }} 字</view
        >
      </view>

      <view class="page-action">
        <view class="btn-save">
          <u-button
            type="primary"
            :custom-style="btnStyle"
            @click="handleBeforeSave"
            v-if="showSave"
            >保存</u-button
          >
        </view>
      </view>
    </view>
    <u-popup
      v-model="showExample"
      mode="bottom"
      border-radius="36"
      safe-area-inset-bottom
      closeable
      height="934rpx"
    >
      <view class="example-popup">
        <view class="example-popup-top">
          <view class="example-popup-top-title">参考范例</view>
          <view class="example-popup-top-subtitle"
            >提供不同身份场景的参考，让写简历更高效</view
          >
        </view>
        <view class="example-popup-content">
          <template v-for="(item, index) in exampleList">
            <view
              class="example-popup-content-item"
              v-if="refMapper[propType] == item.refType"
              :key="index"
            >
              <view class="example-popup-content-item-title">
                <img :src="refRoleIcon" class="refRoleIcon" alt="" />
                {{ refRoleMapper[item.refRole + ''] }}
              </view>
              <view class="example-popup-content-item-content">{{
                item.refContent
              }}</view>
              <view class="example-popup-content-item-btn">
                <view @click="handleUseExample(item)">使用</view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </u-popup>
  </page-wrap>
</template>

<script>
import { updatePersonDetail, getResumeData } from '@/api/index';
import { refList } from '@/api/modules/career.js';
import newResumeItem from '@/mixins/newResumeItem';
import { dealSingleModuleScore } from '@/api/modules/career.js';
import MyTextareac from '../components/MyTextareac.vue';
export default {
  mixins: [newResumeItem],
  data() {
    return {
      resumeModule: '', //上报改动用
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      inputValue: '',
      inputHeight: 800,
      isBlur: false,
      isFocus: false,
      showSave: true,
      showTitle: true,
      showExample: false,
      iconPath: this.$imgBaseSelf + 'resume/textareaExample.png',
      refRoleIcon: this.$imgBaseSelf + 'resume/refRoleIcon.png',
      newResumeCurrentFormItemInfo: {},
      propType: '',
      label: '',
      refRoleMapper: {
        '-1': '通用',
        0: '应届生',
        1: '社会人才'
      },
      subTitleMapper: {
        workdesc:
          '请简述工作背景，曾负责的工作内容，克服过的困难，取得的工作成果',
        eval: '丰富的个人介绍，更能赢得招聘者青睐',
        person_projectDesc: '填写项目内容，更能赢得招聘者青睐',
        skill: '填写技能特长，更能赢得招聘者青睐',
        train_desc: '填写培训经历，更能赢得招聘者青睐',
        schoolExp_desc: '填写校园经历描述，更能赢得招聘者青睐',
        edus: '填写教育背景描述，更能赢得招聘者青睐'
      },
      refMapper: {
        workdesc: '1',
        eval: '3',
        person_projectDesc: '2',
        skill: '5',
        train_desc: '4',
        schoolExp_desc: '6',
        edus: '7'
      },
      placeholderMapper: {
        workdesc: `1、主要负责新员工入职培训； <br />
          2、分析制定员工每月个人销售业绩；<br />
          3、帮助员工提高每日客单价，整体店面管理等工作`,
        eval: '请输入个人介绍',
        person_projectDesc: '请输入项目内容',
        skill: '请输入技能特长',
        train_desc: '请输入培训经历',
        schoolExp_desc: '请输入校园经历描述',
        edus: '请输入教育背景描述'
      },
      exampleList: [],
      btnSaveStyle: {
        border: 'none',
        backgroundColor: '#E9ECEF',
        'border-radius': '16rpx'
      },
      btnStyle: {
        border: 'none',
        'border-radius': '16rpx'
      }
    };
  },
  created() {
    //这个是二级进来的，
    const obj = uni.getStorageSync('newResumeCurrentFormItemInfo');
    if (obj) {
      this.newResumeCurrentFormItemInfo = obj;
      this.inputValue = obj.value;
      this.propType = obj.prop;
      this.label = obj.label;
    }
  },
  onLoad(opt) {
    //这个直接从newResume/index.vue进来的，
    if (opt.type == 'eval') {
      this.propType = opt.type;
      this.label = '自我评价';
      this.resumeModule = 6;
      //获取输入框初始值
    } else if (opt.type == 'skill') {
      this.propType = opt.type;
      this.label = '技能特长';
      this.resumeModule = 9;
      //获取输入框初始值
    }
    this.reqGetRefList();
    this.getResumeData();
  },
  watch: {
    isFocus(val) {
      console.log('isFocus', val);
      if (val) {
        // this.showSave = false;
        this.showTitle = false;
        this.dynamicTitle = this.label;
        this.isBlur = false;
      } else {
        this.showTitle = true;
        this.dynamicTitle = '';
      }
    },
    isBlur(val) {
      console.log('isBlur', val);

      if (val) {
        // this.showSave = true;
        this.showTitle = true;
        this.dynamicTitle = '';
        this.isFocus = false;
      }
    }
  },
  components: {
    MyTextareac
  },
  methods: {
    handleBlur() {
      this.isFocus = false;
      this.inputHeight = 600;
    },
    handleFocus() {
      this.isFocus = true;
      this.inputHeight = 500;
    },
    //编辑单个简历模块上报
    dealSingleModuleScore() {
      if (!this.resumeModule) return;
      const params = {
        personId: this.personId || uni.getStorageSync('person-id').slice(2),
        resumeModule: this.resumeModule //简历模块 1:基本信息 2:求职状态 3:求职意向 4:工作经历 5:项目经验 6：自我评价 7：教育背景 8：个人证书 9：技能特长 10：培训经历 11：校园经历 12：奖项荣誉
      };
      dealSingleModuleScore(params);
    },
    getResumeData() {
      console.log(
        'getApp().globalData.resumeInfo',
        getApp().globalData.resumeInfo
      );

      if (
        !getApp().globalData.resumeInfo ||
        !getApp().globalData.resumeInfo.Iname_p
      ) {
        uni.showLoading();
        let param = {
          personId: this.personId,
          conditionArr: JSON.stringify({
            is_mp: 1
          })
        };
        getResumeData(param)
          .then((res) => {
            if (this.propType == 'eval') {
              this.inputValue = res.data.Grzz;
            } else if (this.propType == 'skill') {
              this.inputValue = res.data.otherTc;
            }
          })
          .finally(() => {
            uni.hideLoading();
          });
      } else {
        console.log(
          'getApp().globalData.resumeInfo',
          getApp().globalData.resumeInfo
        );
        const info = JSON.parse(JSON.stringify(getApp().globalData.resumeInfo));
        if (this.propType == 'eval') {
          this.inputValue = info.Grzz;
        } else if (this.propType == 'skill') {
          this.inputValue = info.otherTc;
        }
      }
    },
    //获取范文列表
    reqGetRefList() {
      let refType = '';
      switch (this.propType) {
        case 'workdesc':
          refType = 1;
          break;
        case 'person_projectDesc':
          refType = 2;
          break;
        case 'eval':
          refType = 3;
          break;
        case 'train_desc':
          refType = 4;
          break;

        default:
          break;
      }
      const params = {
        // refRole: "",
        refType
      };
      refList(params)
        .then((res) => {
          if (res.code == 200) {
            this.exampleList = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleBeforeSave() {
      //分开多种情况
      switch (this.propType) {
        case 'eval':
          this.handleRequestSave();
          break;
        case 'skill':
          this.handleRequestSave();
          break;

        default:
          this.handleSave();
          break;
      }
    },
    handleSave() {
      if (this.propType) {
        uni.setStorageSync('newResumeCurrentFormItemInfo', {
          ...this.newResumeCurrentFormItemInfo,
          value: this.inputValue
        });
        uni.navigateBack();
      }
    },
    handleRequestSave() {
      let params = {};
      var updatalist = {};
      updatalist.where = "id='" + this.personId + "'";
      updatalist.personId = this.personId;
      var update = [];
      if (this.propType == 'eval') {
        update.push({
          columnName: 'grzz',
          columnValue: this.inputValue
        });
      } else if (this.propType == 'skill') {
        update.push({
          columnName: 'otherTc',
          columnValue: this.inputValue
        });
      }
      updatalist.update = update;
      params.param = JSON.stringify(updatalist);
      updatePersonDetail(params).then((res) => {
        if (res.code == 200) {
          this.dealSingleModuleScore();
          uni.setStorageSync('resumeUpdated', true); //设置一个标识，在resumeAssesment如果为true才会请求接口
          uni.showToast({
            icon: 'none',
            title: '修改成功',
            complete() {
              setTimeout(() => {
                uni.removeStorageSync('Grzz');
                uni.removeStorageSync('otherTc_p');
                uni.navigateBack();
              }, 1500);
            }
          });
        } else {
          uni.showToast({ icon: 'none', title: res.status_desc });
        }
      });
    },
    handleUseExample(item) {
      this.inputValue = item.refContent;
      this.showExample = false;
    },
    handleBottom(e) {
      console.log('keyboardheightchange', e);
      this.inputBottom = e > 146 ? e - 146 : 0;
    }
  }
};
</script>

<style lang="scss">
$img-base-resume: $img-base + 'resume/';
.form-wrap {
  flex-grow: 1;
  padding: 32rpx 28rpx 0 32rpx;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-big;
  .form-top {
    margin-bottom: 34rpx;
    &-title {
      font-size: 48rpx;
      color: #000000;
      font-weight: bold;
      margin-bottom: 16rpx;
    }
    &-subtitle {
      font-size: 26rpx;
      color: #999999;
    }
  }
  .form-content {
    position: relative;
    border-bottom: 2rpx solid #dedede;
    ::v-deep .form-text {
      textarea {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 44rpx;
        padding-bottom: 70rpx;
        max-height: 800rpx;
      }
      .isFocus {
        max-height: 350rpx;
      }
      .placeholder {
        padding: 0 !important;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bfbfbf;
        line-height: 44rpx;
      }
    }
    .textarea-limit {
      position: absolute;
      display: flex;
      bottom: 18rpx;
      right: 0;
    }
    &-example {
      position: absolute;
      display: flex;
      bottom: 18rpx;
      left: 0;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #f75a3e;
      line-height: 36rpx;
      &-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 14rpx;
      }
    }
  }
  .page-action {
    width: calc(100vw - 64rpx);
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    margin-top: 32rpx;
    background-color: white;
    &-btn {
      &-delete {
        text-align: left;
      }
      &-save {
        text-align: right;
      }
    }
    .btn-delete {
      flex-shrink: 0;
      width: 180rpx;
      margin-right: 40rpx;
    }
    .save-btn {
      flex-shrink: 1;
      // margin: 82rpx 0 4rpx;
      width: 100%;
      border-radius: 16rpx;
    }
  }
}
.example-popup {
  padding: 32rpx 0rpx;
  &-top {
    // margin-bottom: 32rpx;
    padding: 0 32rpx;
    &-title {
      font-size: 40rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 800;
      color: #000000;
      line-height: 56rpx;
      margin-bottom: 12rpx;
    }
    &-subtitle {
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 36rpx;
    }
  }
  &-content {
    width: 100vw;
    // height: 735rpx;
    // height: calc(934rpx - 84rpx);
    // padding-bottom: 64rpx;
    &-item {
      background: #ffffff;
      box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 8rpx;
      padding: 36rpx 32rpx;
      margin: 0 32rpx;
      margin-top: 32rpx;
      &:last-of-type {
        margin-bottom: 50rpx;
      }
      &-title {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 800;
        color: #000000;
        line-height: 44rpx;
        margin-bottom: 24rpx;

        .refRoleIcon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
      &-content {
        font-size: 26rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 36rpx;
        margin-bottom: 24rpx;
      }
      &-btn {
        display: flex;
        justify-content: flex-end;
        view {
          padding: 10rpx 32rpx;
          background: #f75a3e;
          border-radius: 8rpx;
          color: white;
        }
        // float: right;
      }
    }
  }
}
</style>
